<template>
  <div id="">
    <headerbox :hasBack='true' :headerTitle="'找赛事'"></headerbox>

    <div class="bgWhite" style="display:flex; align-items: center;">
      <tabNav :tabArr="tabArr" @tabEvent="tabNavEvent" class="bgWhite" style="flex:2"></tabNav>
      <span @click="showFilter" style="flex:1; text-align:center;">筛选
        <img src="@/assets/screen_icon.png" alt="" width="15">
      </span>
    </div>
    <!-- <div class="">

    </div> -->
    <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined" style="bottom:0; top:80px;">
      <noneList v-if="skilllist.length==0"></noneList>
      <div class="bgWhite mb10" v-else v-for="skillItem in skilllist" :key="skillItem.key">
        <eventItem :matchInfo="skillItem"></eventItem>
      </div>
    </v-scroll>
    <!-- picker -->
    <mt-popup
      v-model="pickerVisible"
      position="right" style="width:100%; height:100vh;">
      <filterPopup @filterEvent="filterEvent"></filterPopup>
    </mt-popup>
  </div>
</template>
<script>
import Vue from 'vue'
import {checkUserAuth,matchList,orderListPending} from '@/utils/ajaxRequest.js';
import vScroll from '@/components/loadMore/loadMore';
export default {
  name: "",
  data: () => ({
    headerArr:['找陪练','发需求'],
    isNeed:false,
    tabArr:['距离','费用'],
    token:'',
    skillJson:{
      token:'',
      classifyType:'',    //可选类型，技能服务列表刷选使用
      lng:'',
      lat:'',
      currentPage:1,    //分页
      orderBy:0,       //排序方式 距离：0；费用：1
      sortType:0,       //0 升序 1降序
    },
    skilllist:'',
    distance_:true,
    payment_:false,   //初始值，显示距离情况，费用是关闭的

    pickerVisible:false,

    pageNo:1,
    enableInfinite:true,

  }),
  components: {
    headerTab:()=>import('../../template/headerTab'),
    eventItem:()=>import('@/pages/members/myActivity/activityItem'),
    tabNav:()=>import('../../template/tabNav'),
    noneList:()=>import('@/components/noneList/noneList'),
    filterPopup:()=>import('./filterPopup/filterPopup'),
    vScroll,
  },
  methods: {
    onRefresh(done) {   //刷新
      this.pageNo = 1;
       this.getSkillList();
       done() // call done
    },
    onInfinite(done) {    //加载
        let self = this;
        self.enableInfinite = false;
        this.pageNo++;
        this.getSkillList();
        done();
     },
    // 筛选弹出层
    showFilter() {
      this.pickerVisible = true;
    },
    // 关闭弹出层
    filterEvent(data) {
      this.pickerVisible = false;
      this.pageNo = 1;
      console.log(data);
      console.log(data.pro_type.join(','));
      this.skillJson.classifyType = data.pro_type.join(',');
      this.skillJson.sportsLev = data.sportsLevValue;
      this.skillJson.sex = data.sexValue.id;
      // 请求数据
      this.getSkillList();
    },
    // 获取技能列表
    getSkillList() {
      let self = this;
      let skillParam = self.skillJson;
      skillParam.currentPage = self.pageNo;
      // 技能列表
      matchList(skillParam).then(res=>{
        console.log(res);
        if (res) {
          console.log(skillParam.currentPage);
          let result = res.data.result;
          if (result.length<1) {
            self.enableInfinite = false;    //关闭上拉加载
          }else{
            self.enableInfinite = true;     //打开上拉加载
          }
          if (self.pageNo==1) {
            self.skilllist = result;
          }else{
            self.skilllist = self.skilllist.concat(result);
          }
        }
      })
    },
    tabNavEvent(data) {
      console.log(data);
      this.pageNo = 1;
      let distance = this.distance_;
      let payment = this.payment_;
      if(data==0) {   //距离
        this.skillJson.orderBy = 0;
        this.distance_ = !distance;
        if(this.distance_) {    //true为升序，false为降序
          this.skillJson.sortType = 0;
        }else{
          this.skillJson.sortType = 1;
        }
      }else{    //费用
        this.skillJson.orderBy = 1;
        this.payment_ = !payment;
        if(this.payment_) {    //true为升序，false为降序
          this.skillJson.sortType = 0;
        }else{
          this.skillJson.sortType = 1;
        }
      }
      this.getSkillList();
    },
    tabEvent(data) {
      console.log(data);
      if (data==1) {  //需求列表
        this.isNeed = true;
      }else{          //技能列表
        this.isNeed = false;
      }
      this.getSkillList();
    },
    // 获取浏览器所在的定位
    geolocation() {
      let self = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          var mk = new BMap.Marker(r.point);
          console.log(r.point.lng+','+r.point.lat);
          // 获取经纬度
          self.skillJson.lng = r.point.lng;
          self.skillJson.lat = r.point.lat;
        }
        else {
          alert('failed'+this.getStatus());
        }
      })
    }

  },
  created() {
    //do something after creating vue instance
    this.geolocation();
  },
  mounted() {
    //do something after mounting vue instance
    let classifyTypeId = this.$route.query.classifyTypeId;
    this.skillJson.classifyType = classifyTypeId;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.token = xlyd_loginInfo.token;
    this.skillJson.token = xlyd_loginInfo.token;
      this.getSkillList();
  },
}
</script>
<style lang="scss" scoped>
</style>
